{% extends "templates/base.html.jinja" %}

{% block title %}
History for {{ phone_number or 'all numbers' }}
{% endblock %}

{% block content %}
<!-- Call me button -->
{% include "templates/call_me.html.jinja" %}

<!-- Search bar for phone number -->
<div class="p-4 -mb-4 col-span-full sticky top-0 lg:px-0 lg:grid lg:grid-cols-6">
  <div class="lg:col-start-2 lg:col-end-6">
    <form action="/report" method="GET" class="flex space-x-4">
      <div class="grow flex space-x-4 rounded-full backdrop-blur shadow-md bg-neutral-200/60 hover:bg-neutral-300/60 dark:bg-neutral-700/60 dark:hover:bg-neutral-600/60">
        <span class="pl-6 py-4 select-none cursor-default">🔎</span>
        <input type="tel" name="phone_number" placeholder="Limit search to one number (E164, e.g. +33612345678)" value="{{ phone_number or '' }}" class="py-4 grow bg-transparent outline-none">
      </div>
      <button type="submit" class="px-6 py-4 rounded-full backdrop-blur shadow-md font-semibold bg-gradient-to-r from-pink-300/30 hover:from-pink-400/30 dark:from-pink-700/30 dark:hover:from-pink-600/30 to-violet-300/30 hover:to-violet-400/30 dark:to-violet-700/30 dark:hover:to-violet-600/30">Search</button>
    </form>
  </div>
</div>

<!-- History of calls -->
<div class="col-span-full rounded-md overflow-hidden lg:ring-1 ring-neutral-200/60 dark:ring-neutral-700/60">
  <div class="grid grid-cols-4 border-b border-neutral-200/60 dark:border-neutral-700/60 text-neutral-600 dark:text-neutral-400">
    <div class="p-4 truncate">📞&nbsp;&nbsp;Phone used</div>
    <div class="p-4 truncate">📅&nbsp;&nbsp;Local date</div>
    <div class="p-4 truncate col-span-2">📝&nbsp;&nbsp;Short summary</div>
  </div>
  {% for call in calls %}
  <a href="/report/{{ call.call_id }}" title="Call from {{ call.initiate.phone_number }} the {{ call.created_at.astimezone(call.tz()).strftime('%a %d %b %Y, %H:%M (%Z)') }}" class="grid grid-cols-4 hover:bg-neutral-100/60 dark:hover:bg-neutral-800/60 {% if not loop.last %}border-b border-neutral-200/60 dark:border-neutral-700/60{% endif %}">
    <div class="p-4 truncate">{{ call.initiate.phone_number }}</div>
    <div class="p-4 truncate">{{ call.created_at.astimezone(call.tz()).strftime('%a %d %b %Y, %H:%M (%Z)') }}</div>
    <div class="col-span-2 p-4 truncate">{{ call.synthesis.short | lower }}</div>
  </a>
  {% endfor %}
</div>

<!-- Pagination -->
<div class="col-span-full px-4 text-neutral-600 dark:text-neutral-400">
  {% if total < count %}
  All {{ total }} results are displayed.
  {% else %}
  The {{ count }} first results over {{ total }} are displayed.
  {% endif %}
</div>
{% endblock %}
